<template>
  <!-- <div></div> -->
  <div ref="head" :class={[tabClassName]:true} @touchstart="stopSlid">
    <slot></slot>
  </div>

</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    data () {
      return {}
    },
    mounted () {
      var bounce = this.bounce
      var scroll = new BScroll(this.$refs.head, {
        startX: 0,
        startY: 0,
        scrollX: true,
        scrollY: false,
        stop: true,
        freeScroll: true,
        momentum: true,
        bounce: bounce,
        eventPassthrough: 'vertical',
      })
      this.scroll = scroll;
      this.listenBscrollEnd()//初始化监听滚轮滑动位置
    },
    updated () {
      this.scroll.refresh()
    },
    props: {
      tabClassName: {
        type: String,
        default: ""
      },
      bounce: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      stopSlid () {
        this.$store.commit('xxy/setstoptouch', false)
      },
      // 监听滚轮结束方法
      listenBscrollEnd() {
        this.scroll.on('scrollEnd', (pos) => {
          if (this.scroll.maxScrollX + 100 > this.scroll.x) {
          	console.log('222222222222',this.scroll.x,this.scroll.maxScrollX)
            this.$emit('scrollBottom') // 将滚轮已经滚动到底部事件 传递给父级
          }
        })
      },
    },
    computed: {},
    components: {}
  }
</script>

<style scoped>
  .ranking_head_box {
    width: 100%;
    top: 3rem;
    height: 3.7rem;
    z-index: 1;
    background: white;
  }

</style>
